import React, { useState, useEffect } from "react";
import Taro, { getCurrentInstance } from "@tarojs/taro";
import { View } from "@tarojs/components";
import { Button, Image, Input, Cell, Dialog } from "@nutui/nutui-react-taro";
// import { Checklist } from "@nutui/icons-react-taro";

import {
  getUserInfo,
  getMachineInfo,
  machineRemove,
  machineRestName,
} from "../../services/account";
import { showErrorToast, showSuccToast } from "../../utils/util";

import IconScan from "../../assets/imgs/home/icon-scan.svg";
import IconArrowRight from "../../assets/imgs/home/icon-arrow-r.svg";

import "./details.scss";

function HomeDetails(props) {
  const params = getCurrentInstance().router.params;
  const { machineCode } = params;

  const [showModal, setShowModal] = useState(0);
  const [machineInfoState, setMachineInfoState] = useState({});

  const [machineNameState, setMachineNameState] = useState("");

  // console.log(`machineInfoState:${JSON.stringify(machineInfoState)}`);

  const machineStatus = {
    1: "在线",
    2: "离线",
  };

  const fnWaterQuality = (val) => {
    if (val <= 20) {
      return "优";
    } else if (val > 20 && val <= 50) {
      return "良好";
    } else if (val > 50) {
      return "劣";
    }
  };

  // 获取-机器信息
  const postMachineInfo = async () => {
    const payload = {
      machineCode,
    };
    const res = await getMachineInfo(payload);
    // console.log(JSON.stringify(res));
    if (res.code === 200) {
      // console.log(res.data);
      const { nickName } = res.data;
      setMachineInfoState({ ...res.data });
      setMachineNameState(nickName);
    }
  };

  // 获取-删除机器
  const postMachineRemove = async (machineId) => {
    const payload = {
      machineId,
    };
    const resData = await machineRemove(payload);
    if (resData.code === 200) {
      showSuccToast("删除成功");
      Taro.switchTab({
        url: "/pages/home/home",
      });
    }
  };

  // 获取-删除机器
  const postMachineRestName = async (machineId, nickName) => {
    const payload = {
      machineId,
      nickName,
    };
    const resData = await machineRestName(payload);
    if (resData.code === 200) {
      showSuccToast("删除成功");
      Taro.switchTab({
        url: "/pages/home/home",
      });
    }
  };

  useEffect(() => {
    postMachineInfo();
  }, []);

  return (
    <View className="g_details">
      <View className="details_hd"></View>
      <View className="details_bd">
        <Cell.Group className="m_info">
          <Cell className="info_item" title="设备信息" extra="" />
          <Cell
            className="info_item"
            title={machineInfoState.nickName}
            description={`机器编码：${machineInfoState.machineCode}`}
            // extra={
            //   <View className="status">
            //     <View className="u_status_2">离线</View>
            //     <Image src={IconArrowRight} width="20" height="20" />
            //   </View>
            // }
          />
          <Cell
            className="info_item"
            title="滤芯余量"
            extra={
              <View className="strainer">
                {+machineInfoState.strainer
                  ? `${machineInfoState.strainer}%`
                  : "--"}
              </View>
            }
          />
          <Cell
            className="info_item"
            title="水质"
            extra={
              <View className="strainer">
                {machineInfoState.outLetTds
                  ? fnWaterQuality(machineInfoState.outLetTds)
                  : "--"}
              </View>
            }
          />
          <Cell
            className="info_item"
            title="出水温度"
            extra={
              <View className="strainer">
                {+machineInfoState.temperature
                  ? `${machineInfoState.temperature}℃`
                  : "--"}
              </View>
            }
          />
        </Cell.Group>
      </View>
      <View className="details_ft">
        <Button
          className="btn_del"
          onClick={() => {
            setShowModal(1);
          }}
        >
          删除
        </Button>
        <Button className="btn_rename" onClick={() => setShowModal(2)}>
          重命名设备
        </Button>
      </View>
      {showModal === 1 && machineInfoState.id ? (
        <Dialog
          title={`确认删除【${machineInfoState.nickName}】设备吗?`}
          visible={showModal === 1}
          onConfirm={() => {
            postMachineRemove(machineInfoState.id);
          }}
          onCancel={() => setShowModal(0)}
        ></Dialog>
      ) : null}
      {showModal === 2 && machineInfoState.id ? (
        <Dialog
          title={`重命名设备`}
          visible={showModal === 2}
          onConfirm={() => {
            postMachineRestName(machineInfoState.id, machineNameState);
          }}
          onCancel={() => {
            setMachineNameState(machineInfoState.nickName);
            setShowModal(0);
          }}
          className="rest_name_modal"
        >
          <Input
            clearable
            value={machineNameState}
            placeholder="请输入设备名称"
            className="ipt_nick"
            onChange={(val) => {
              // console.log(val);
              setMachineNameState(val);
            }}
            onConfirm={() => {
              postMachineRestName(machineInfoState.id, machineNameState);
            }}
          />
        </Dialog>
      ) : null}
    </View>
  );
}

export default HomeDetails;
